<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Avatar, Button, Card, Select } from 'ant-design-vue';

const router = useRouter();

// 公司选择
const selectedCompany = ref('北京神州源科技有限公司');
const companies = ref([
  { value: '北京神州源科技有限公司', label: '北京神州源科技有限公司' },
  { value: '上海分公司', label: '上海分公司' },
  { value: '深圳分公司', label: '深圳分公司' },
]);

// 统计数据
const statsCards = ref([
  {
    title: '余额表',
    description: '本期借方合计',
    value: '¥1,234,567.89',
    icon: 'ant-design:bar-chart-outlined',
    color: '#6366f1',
    bgColor: '#f0f9ff',
  },
  {
    title: '资产负债表',
    description: '资产总计',
    value: '¥9,876,543.21',
    icon: 'ant-design:dollar-outlined',
    color: '#f59e0b',
    bgColor: '#fef3c7',
  },
  {
    title: '利润表',
    description: '净利润',
    value: '¥456,789.12',
    icon: 'ant-design:file-text-outlined',
    color: '#10b981',
    bgColor: '#d1fae5',
  },
  {
    title: '现金流量表',
    description: '期末现金余额',
    value: '¥2,345,678.90',
    icon: 'ant-design:home-outlined',
    color: '#06b6d4',
    bgColor: '#cffafe',
  },
]);

// 最近凭证数据
const recentVouchers = ref([
  {
    id: 1,
    date: '2024-01-15',
    description: '销售收入',
    amount: '¥50,000.00',
  },
  {
    id: 2,
    date: '2024-01-14',
    description: '办公用品采购',
    amount: '¥2,500.00',
  },
  {
    id: 3,
    date: '2024-01-13',
    description: '员工工资',
    amount: '¥120,000.00',
  },
  {
    id: 4,
    date: '2024-01-12',
    description: '房租支出',
    amount: '¥15,000.00',
  },
]);

// 方法
const handleCompanyChange = (value: string) => {
  selectedCompany.value = value;
};

const handleBackToWorkspace = () => {
  router.push('/dashboard/workspace');
};

const handleAddVoucher = () => {
  router.push('/financial/voucher/add');
};

const handleViewMoreVouchers = () => {
  router.push('/financial/voucher/list');
};

const handleCardClick = () => {
  // 所有统计卡片都导航到报表中心
  router.push('/financial/reports');
};
</script>

<template>
  <Page auto-content-height>
    <!-- 顶部栏 -->
    <div
      class="mb-6 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
    >
      <div class="flex items-center space-x-4">
        <!-- 公司选择 -->
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-600">公司：</span>
          <Select
            v-model:value="selectedCompany"
            :options="companies"
            class="w-64"
            @change="handleCompanyChange"
          />
        </div>

        <!-- 返回工作台按钮 -->
        <Button type="primary" @click="handleBackToWorkspace">
          返回工作台
        </Button>

        <!-- 主页标识 -->
        <div class="flex items-center space-x-1 text-gray-600">
          <IconifyIcon icon="ant-design:home-outlined" />
          <span class="font-medium">主页</span>
        </div>
      </div>

      <!-- 用户信息 -->
      <div class="flex items-center space-x-2">
        <Avatar>
          <IconifyIcon icon="ant-design:user-outlined" />
        </Avatar>
        <span class="text-sm text-gray-600">老板</span>
        <div class="h-2 w-2 rounded-full bg-green-500"></div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
      <!-- 左侧：新增凭证 -->
      <div class="lg:col-span-1">
        <Card class="h-full">
          <div class="flex h-64 flex-col items-center justify-center">
            <Button
              type="dashed"
              size="large"
              class="flex h-32 w-full flex-col items-center justify-center border-2 border-dashed border-blue-300 transition-colors hover:border-blue-500"
              @click="handleAddVoucher"
            >
              <IconifyIcon
                icon="ant-design:plus-outlined"
                class="mb-2 text-3xl text-blue-500"
              />
              <div class="text-lg font-medium text-gray-700">新增凭证</div>
            </Button>
            <div class="mt-4 text-sm text-gray-500">1月份未结账</div>
          </div>
        </Card>
      </div>

      <!-- 右侧：统计卡片和最近凭证 -->
      <div class="space-y-6 lg:col-span-2">
        <!-- 统计卡片区 -->
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Card
            v-for="card in statsCards"
            :key="card.title"
            class="cursor-pointer transition-shadow hover:shadow-md"
            @click="handleCardClick"
          >
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <div class="mb-1 text-sm text-gray-600">
                  {{ card.description }}
                </div>
                <div class="mb-2 text-2xl font-bold text-gray-900">
                  {{ card.value }}
                </div>
                <div class="text-lg font-medium text-gray-700">
                  {{ card.title }}
                </div>
              </div>
              <div
                class="flex h-12 w-12 items-center justify-center rounded-lg"
                :style="{ backgroundColor: card.bgColor }"
              >
                <IconifyIcon
                  :icon="card.icon"
                  :style="{ color: card.color, fontSize: '24px' }"
                />
              </div>
            </div>
          </Card>
        </div>

        <!-- 最近凭证区 -->
        <Card>
          <template #title>
            <div class="flex items-center justify-between">
              <span>最近凭证</span>
              <Button type="link" @click="handleViewMoreVouchers">
                查看更多
              </Button>
            </div>
          </template>

          <div class="space-y-3">
            <div
              v-for="voucher in recentVouchers"
              :key="voucher.id"
              class="flex cursor-pointer items-center justify-between rounded-lg bg-gray-50 p-3 transition-colors hover:bg-gray-100"
            >
              <div class="flex-1">
                <div class="font-medium text-gray-900">
                  {{ voucher.description }}
                </div>
                <div class="text-sm text-gray-500">{{ voucher.date }}</div>
              </div>
              <div class="text-lg font-medium text-gray-900">
                {{ voucher.amount }}
              </div>
            </div>
          </div>

          <div
            v-if="recentVouchers.length === 0"
            class="py-8 text-center text-gray-500"
          >
            暂无凭证记录
          </div>
        </Card>
      </div>
    </div>
  </Page>
</template>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.ant-card-head {
  border-bottom: 1px solid #f0f0f0;
}

.ant-btn-dashed:hover {
  border-color: #1890ff;
  color: #1890ff;
}
</style>
